<template>
  <div class="walletCount addWallet">
    <div class="walletCount-top">
      <div class="bill">
        <el-form ref="form" :model="form" :rules="rules" style="width: 100%" :disabled="loading">
          <el-form-item>
            <el-select v-model="form.region">
              <el-option v-for="(v,k) in typeOption" :label="k" :value="k" :key="k"></el-option>
            </el-select>
          </el-form-item>
          <p class="info">{{typeOption[form.region].info}}</p>
          <el-form-item :label="$t('wallet.address.name')" class="note" prop="name">
            <el-input v-model="form.name" :placeholder="$t('wallet.walletAdd.name_input')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('router.address')" class="note" prop="address">
            <el-input v-model="form.address" :placeholder="$t('wallet.walletAdd.address_info')"></el-input>
          </el-form-item>
          <el-form-item :label="$t('forget.input_code')" class="code note" prop="code">
            <el-input v-model="form.code" :placeholder="$t('forget.email_code_info')"></el-input>
            <button type="button" class="sendcode" :class="{disabled:loading}" @click="sendcode" :disabled="!add_address_code.v_code_btn || loading">{{add_address_code.codeStr}}</button>
          </el-form-item>
          <el-form-item class="bottom_btn">
            <el-button @click="resetForm('form')">{{$t('btn.cancel')}}</el-button>
            <el-button type="primary" @click="submitForm('form')">
              <i v-if="loading" class="el-icon-loading"></i>
              <template v-else>{{$t('btn.confirm')}}</template>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { walletAddressAdd, checkEmailCode, getcode, sendTelCode } from '@/api';
import { mapGetters } from 'vuex';

export default {
  data() {
    const nameReg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,20}$/;
    const checkName = (rule, value, callback) => {
      if (!value) {
        callback(new Error(this.$t('wallet.walletAdd.remarks')));
      } else if (!nameReg.test(value)) {
        callback(new Error(this.$t('wallet.walletAdd.remarks_info')));
      } else {
        callback();
      }
    };
    return {
      loading: false,
      typeOption: {
        BTC: {
          info: '',
        },
        ZEC: {
          info: '',
        },
        // BUC: {
        //   info: this.$t('wallet.walletAdd.buc_info'),
        // },
        // MUT: {
        //   info: this.$t('wallet.walletAdd.mut_info'),
        // },
      },
      form: {
        name: '',
        region: 'BTC',
        address: '',
        code: '',
      },
      rules: {
        name: [
          { required: true, message: this.$t('wallet.walletAdd.remarks'), trigger: 'blur' },
          { validator: checkName, trigger: 'change' },
          { validator: checkName, trigger: 'blur' },
        ],
        address: [
          { required: true, message: this.$t('wallet.walletAdd.address_require_info'), trigger: 'blur' },
          { max: 64, message: this.$t('wallet.walletAdd.address_require_info'), trigger: 'blur' },
          { required: true, message: this.$t('wallet.walletAdd.address_require_info'), trigger: 'change' },
        ],
        code: [
          { required: true, message: this.$t('forget.email_code_info'), trigger: 'change' },
          { required: true, message: this.$t('forget.email_code_info'), trigger: 'blur' },
        ],
      },
      add_address_code: {
        v_code_btn: true,
        codeStr: this.$t('btn.sendcode.getcode'),
        time: 60,
        timer: null,
      },
    };
  },
  computed: {
    ...mapGetters(['email', 'id', 'loginType', 'tel', 'isBingEmail']),
  },
  methods: {
    sendcode() {
      if (!this.isBingEmail && this.loginType === 'email') {
        this.$confirm(this.$t('wallet.address.confirm_info'), this.$t('mill.tip'), {
          confirmButtonText: this.$t('btn.confirm'),
          cancelButtonText: this.$t('btn.cancel'),
          type: 'warning',
        }).then(() => {
          this.$router.push('/setup');
        }).catch(() => {});
        return;
      }
      this.add_address_code.v_code_btn = false;
      this.add_address_code.codeStr = `${this.$t('btn.sendcode.resend')}(60s)`;
      clearInterval(this.add_address_code.time);
      this.add_address_code.timer = setInterval(() => {
        if (this.add_address_code.time > 0) {
          this.add_address_code.time -= 1;
          this.add_address_code.codeStr = `${this.$t('btn.sendcode.resend')}(${this.add_address_code.time}s)`;
        } else {
          clearInterval(this.add_address_code.timer);
          this.add_address_code.time = 60;
          this.add_address_code.codeStr = this.$t('btn.sendcode.sendcode');
          this.add_address_code.v_code_btn = true;
        }
      }, 1000);
      if (this.isBingEmail && this.loginType === 'email') {
        getcode({
          email: this.email,
          type: 'wallet_address',
        }).then((res) => {
          if (res.data.status === 1) {
            this.$notify({
              message: this.$t('set.send_email_code'),
              type: 'success',
              showClose: false,
            });
          } else {
            this.$message({
              message: this.$t(`api.${res.data.errcode}`),
              type: 'warning',
            });
          }
        }).catch(() => {
          this.$message.error(this.$t('error.catchError'));
        });
      } else {
        sendTelCode({
          tel: this.tel,
          type: 'wallet_address',
        }).then((res) => {
          if (res.data.status === '1') {
            this.$notify({
              message: this.$t('set.send_phone_code'),
              type: 'success',
              duration: 2000,
              showClose: false,
            });
          } else {
            this.$message({
              message: this.$t(`api.${res.data.errcode}`),
              type: 'warning',
            });
          }
        }).catch(() => {
          this.$message.error(this.$t('error.catchError'));
        });
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.go(-1);
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          checkEmailCode({
            email: this.loginType === 'email' ? this.email : this.tel,
            code: this.form.code,
            type: 'wallet_address',
          }).then((res) => {
            if (res.data.status === 1) {
              walletAddressAdd({
                parent_uid: this.id,
                name: this.form.name,
                address: this.form.address,
                type: this.form.region,
              }).then((resp) => {
                if (resp.data.status === 1) {
                  this.$notify({
                    message: this.$t('api.6106'),
                    type: 'success',
                    duration: 1000,
                    showClose: false,
                  });
                  this.$router.push('/wallet/address');
                } else {
                  this.$message.error(this.$t(`api.${resp.data.errcode}`));
                }
                this.loading = false;
              }).catch(() => {
                this.loading = false;
                this.$message.error(this.$t('error.catchError'));
              });
            } else {
              this.$message.error(this.$t(`api.${res.data.errcode}`));
              this.loading = false;
            }
          }).catch(() => {
            this.loading = false;
            this.$message.error(this.$t('error.catchError'));
          });
        }
      });
    },
  },
};
</script>
<style scoped lang="scss">
.walletCount {
  > div {
    box-sizing: border-box;
  }
  .walletCount-top {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.05);
    border: solid 1px #e0e0e0;
    background-color: #ffffff;
    border-radius: 5px;
    .bill {
      padding: 35px 60px 100px 60px;
      box-sizing: border-box;
      .el-form-item{
        &.note{
          margin-top: 25px;
        }
        &.bottom_btn{
          margin-top: 80px;
          .el-form-item__content{
            button{
              width: 205px;
              height: 50px;
              display:inline-block;
              &:nth-child(1){
                background-color: #fff;
                box-shadow: 0px 0px 5px 0px rgba(0, 130, 108, 0.05);
                border-radius: 5px;
                border: solid 1px #e0e0e0;
                color: #323232;
                margin-right: 60px;
              }
            }
          }
        }
        .el-form-item__content{
          .el-select{
            width: 100%;
          }
        }
      }
      p {
        &.info{
          font-size: 12px;
          color: #eb547c;
          float:left;
          padding-left: 10px;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.addWallet{
  .walletCount-top{
    .bill{
      .el-form-item{
        margin-bottom: 0;
        &.note{
          .el-form-item__label{
            font-size: 22px;
            color: #70c1b3;
            line-height: 38px;
            &::before{
              content: '',
            }
          }
        }
        &.code{
          width:470px;
          .el-form-item__content{
            position: relative;
            .el-input__inner{
              padding-right:128px;
            }
            .sendcode{
              border:none;
              outline:none;
              width:130px;
              height:48px;
              display: inline-block;
              position: absolute;
              right:1px;
              bottom:1px;
              color: #70c1b3;
              border-radius: 5px;
              font-size: 18px;
              &::before{
                content: " ";
                position: absolute;
                top: 50%;
                margin-top: -9px;
                left: 0;
                height: 18px;
                width: 2px;
                background-color: #b2dbbf;
              }
              &:disabled{
                cursor: not-allowed;
              }
              &.disabled{
                background-color: #f5f7fa;
                color: #c0c4cc;
              }
            }
          }
        }
        &.bottom_btn{
          .el-form-item__content{
            text-align: left;
          }
        }
        .el-form-item__content{
          .el-form-item__error{
            top: 16px;
            left: 164px;
            padding: 0 6px;
            border-radius: 2px;
            line-height: 18px;
            height: 18px;
            background-color: #eb547c;
            color: #fff;
            font-size: 12px;
            &::before{
              content: " ";
              position: absolute;
              top: 13px;
              left: -2px;
              transform: rotate(24deg);
              border: 6px solid #eb547c;
              border-bottom-color: transparent;
              border-right-color: transparent;
            }
          }
          .el-input__inner{
            border: solid 1px #b2dbbf;
            border-radius: 5px;
            height: 50px !important;
          }
        }
      }
    }
  }
}
</style>
